<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素的立体几何演示</title>
    <style>
        .scene {
            perspective: 1000px;
            margin: 50px auto;
            width: 600px;
        }
        .stage {
            width: 100%;
            height: 400px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(20deg) rotateY(30deg);
        }
        .base-plane {
            position: absolute;
            width: 500px;
            height: 300px;
            background: rgba(255, 248, 225, 0.7);
            transform: rotateX(90deg) translateZ(-100px);
            transform-origin: center bottom;
            border: 1px solid #ccc;
        }
        .axis {
            position: absolute;
            transform-origin: 0 0;
        }
        .x-axis {
            width: 500px;
            height: 2px;
            background: red;
            transform: rotateX(90deg) translateZ(-100px);
        }
        .y-axis {
            width: 300px;
            height: 2px;
            background: green;
            transform: rotateX(90deg) rotateZ(90deg) translateZ(500px) translateY(-100px);
        }
        .z-axis {
            width: 200px;
            height: 2px;
            background: blue;
            transform: translateY(-100px);
        }
        .axis-label {
            position: absolute;
            font-weight: bold;
        }
        .x-label {
            color: red;
            transform: translate3d(500px, 0, -100px);
        }
        .y-label {
            color: green;
            transform: translate3d(0, 300px, -100px);
        }
        .z-label {
            color: blue;
            transform: translate3d(0, 0, 100px);
        }
        
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
            color: white;
            font-size: 24px;
            text-align: center;
            line-height: 100px;
            opacity: 0.9;
        }
        .red { 
            background: #f44336; 
            transform: translate3d(0px, 0px, 50px); /* Z轴50（上层） */
        }
        .green { 
            background: #4caf50; 
            transform: translate3d(100px, 0px, 50px); /* Z轴50（上层） */
        }
        .blue { 
            background: #2196f3; 
            transform: translate3d(0px, 0px, 0px); /* Z轴0（下层） */
        }
        .black { 
            background: #333; 
            transform: translate3d(0px, 100px, 0px); /* Z轴0（下层） */
        }
        .yellow { 
            background: #ffc107; 
            color: #333;
            transform: translate3d(0px, 200px, 0px); /* Z轴0（下层） */
        }
        
        .explanation {
            max-width: 800px;
            margin: 30px auto;
            padding: 20px;
            background: #f5f5f5;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center;">浮动元素的立体几何模型（Z轴层级）</h2>
    
    <div class="scene">
        <div class="stage">
            <!-- 基准平面（代表文档流层） -->
            <div class="base-plane"></div>
            
            <!-- 坐标轴 -->
            <div class="axis x-axis"></div>
            <div class="axis y-axis"></div>
            <div class="axis z-axis"></div>
            
            <!-- 坐标标签 -->
            <div class="axis-label x-label">X轴（左右）</div>
            <div class="axis-label y-label">Y轴（上下）</div>
            <div class="axis-label z-label">Z轴（前后）</div>
            
            <!-- 元素 -->
            <div class="box red">1</div>
            <div class="box green">2</div>
            <div class="box blue">3</div>
            <div class="box black">4</div>
            <div class="box yellow">5</div>
        </div>
    </div>
    
    <div class="explanation">
        <h3>立体几何解释：</h3>
        
        <p>在三维空间中，每个元素都有(X,Y,Z)三个坐标：</p>
        <ul>
            <li><strong>X坐标</strong>：决定左右位置（值越大越靠右）</li>
            <li><strong>Y坐标</strong>：决定上下位置（值越大越靠下）</li>
            <li><strong>Z坐标</strong>：决定前后位置（值越大越靠前，会覆盖值小的元素）</li>
        </ul>
        
        <p><strong>1. 浮动元素（红1、绿2）的三维坐标：</strong></p>
        <ul>
            <li>红1：(0, 0, 50) → 左上角，Z轴值50（靠前）</li>
            <li>绿2：(100, 0, 50) → 红1右侧，Z轴值50（靠前）</li>
        </ul>
        
        <p><strong>2. 非浮动元素（蓝3、黑4、黄5）的三维坐标：</strong></p>
        <ul>
            <li>蓝3：(0, 0, 0) → 左上角，Z轴值0（靠后）</li>
            <li>黑4：(0, 100, 0) → 蓝3下方，Z轴值0（靠后）</li>
            <li>黄5：(0, 200, 0) → 黑4下方，Z轴值0（靠后）</li>
        </ul>
        
        <p><strong>3. 覆盖的立体几何条件：</strong></p>
        <p>当两个元素在X-Y平面上的投影重叠，且其中一个元素的Z值大于另一个时，Z值大的元素会覆盖Z值小的元素。</p>
        <ul>
            <li>红1(Z=50)与蓝3(Z=0)：X-Y投影重叠 → 红1覆盖蓝3</li>
            <li>绿2(Z=50)与蓝3(Z=0)：X-Y投影部分重叠 → 绿2覆盖蓝3右侧</li>
            <li>红1/绿2与黑4：X-Y投影不重叠（Y坐标不同） → 不覆盖</li>
            <li>红1/绿2与黄5：X-Y投影不重叠（Y坐标不同） → 不覆盖</li>
        </ul>
    </div>
</body>
</html>
<!--立体几何核心原理：
    Z 轴层级决定覆盖关系
        浮动元素位于 Z 轴正方向（Z 值较大）的 "上层空间"
        非浮动元素位于 Z 轴原点（Z=0）的 "基础层空间"
        空间中，Z 值大的物体总会遮挡 Z 值小的物体（就像现实中近处的物体遮挡远处的物体）
    X-Y 平面投影决定覆盖范围
        只有当两个元素在 X-Y 平面上的投影重叠时，才会发生覆盖
        红 1 和绿 2 在 X-Y 平面的投影与蓝 3 重叠，所以会覆盖蓝 3
        黑 4 和黄 5 在 X-Y 平面的投影与红 1、绿 2 不重叠（Y 坐标不同），所以不会被覆盖
    类比现实世界
        想象你在桌子上（Z=0 层）按顺序放了三个盒子（蓝 3、黑 4、黄 5）
        然后你拿起两个盒子（红 1、绿 2），悬停在桌子上方（Z=50 层），正对着蓝 3 的位置
        从你的视角看，悬空的盒子会遮挡住桌子上的蓝 3，但不会遮挡住黑 4 和黄 5，因为它们不在正下方
-->